<!doctype html>
<html>
<head>
<meta charset="utf-8">

<!--bootstrap和jQuery的调用，用于UI设计和网页交互的基础库-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="referrer" content="no-referrer">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fontawesome.min.css">
<script src="js/jquery-3.3.1.min.js"></script> 
<script src="js/bootstrap.bundle.min.js"></script> 
<script src="js/socket.io.js"></script> 
<script src="js/vue.global.js"></script> 

<!--网站标题图标，自定义的css和js的调用-->
<title>starDevice</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="css/main.css">
<script src="js/main.js"></script>
</head>

<body>
<div id="version" style="display: none">Version = 2.0.0</div>
<div id="starbdz"> 
	<div id = "screen"
		 v-html="screen" 
		 style="height: 120px;
				width: 100%;
				background-color: black;
				color:white;
				white-space: pre-wrap"
		 >
	</div>
	<div style="margin-top: 10px;font-size: 16px;">
		<!--<div class="btn btn-dark btn-sm" @click="send('hello')">HELLO</div>-->
        <div class="btn btn-dark btn-sm" @click="send('A')">A</div>
        <div class="btn btn-dark btn-sm" @click="send('L')"><i class="fa-solid fa-arrow-circle-left"></i></div>
        <div class="btn btn-dark btn-sm" @click="send('D')"><i class="fa-solid fa-arrow-circle-down"></i></div>
        <div class="btn btn-dark btn-sm" @click="send('U')"><i class="fa-solid fa-arrow-circle-up"></i></div>
        <div class="btn btn-dark btn-sm" @click="send('R')"><i class="fa-solid fa-arrow-circle-right"></i></div>
        <div class="btn btn-dark btn-sm" @click="send('B')">B</div>
	</div>
	<div style="margin-top: 10px;font-size: 16px;">
        <div class="btn btn-dark btn-sm" @click="start()">开启服务</div>
        <div class="btn btn-dark btn-sm" @click="stop()">关闭服务</div>
	</div>
</div>
</body>
</html>